<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片轮播切换效果-橡树小屋</title>
<style type="text/css">
    *{
        margin:0px;
        padding:0px;
    }
    ul{
        margin-top:100px;
        margin-left:100px;
        list-style:none;
    }
    li{
        border:1px solid #EEAAEE;
        float:left;
        position:relative;
        
    }
    li a{
        border:1px solid red;
        display:block;
        width:80px;
        height:25px;
    }
    li span{
        display:none;
        background:#EEDD11;
        border:1px solid #AAA;
        width:100px;
        height:30px;
        position:absolute;
        top:-55px;
        left:0px;
        text-align:center;
        padding-top:20px;
    }
</style>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
                $("a").hover(function(){
                        var txt=$(this).attr("alt");
                        //$(this).next().slideDown();
                        $(this).next().animate({opacity: "show",top: "-65"},"slow");
                        $(this).parent().next().children().next().hide();
                        $("span").text(txt);
                    },function(){
                        //$(this).next().slideUp();
                        
                        $(this).next().animate({opacity: "hide", top: "-75"}, "fast");
                    });
    
                });
</script>
<body>
    <ul>
        <li>
           <a href="#" alt="minbaby love yanzi">fdsfsasf</a>
           <span></span>
        </li>
        <li>
            <a href="#" alt="love">fdsfsasf</a>
            <span></span>
        </li>
        <li>
            <a href="#" alt="you">fdsfsasf</a>
            <span></span>
        </li> 
        <li>
            <a href="#" alt="嘿嘿">fdsfsasf</a>
            <span></span>
        </li> 
    </ul>
</body>
</html>


